<page-header model="navModel"></page-header>

<div class="page-container page-body">

	<div class="page-sub-heading">
		<h2><!--Edit User-->编辑用户</h2>
	</div>

	<form name="userForm" class="gf-form-group">
			<div class="gf-form">
				<span class="gf-form-label width-10"><!--Name-->姓名</span>
				<input type="text" required ng-model="user.name" class="gf-form-input max-width-25" >
			</div>
			<div class="gf-form">
				<span class="gf-form-label width-10">Email</span>
				<input type="email" ng-model="user.email" class="gf-form-input max-width-25" >
			</div>
			<div class="gf-form">
				<span class="gf-form-label width-10"><!--Username-->用户名</span>
				<input type="text" ng-model="user.login" class="gf-form-input max-width-25" >
			</div>

			<div class="gf-form-button-row">
				<button type="submit" class="btn btn-success" ng-click="update()" ng-show="!createMode"><!--Update-->更新</button>
			</div>
	</form>

	<h3 class="page-heading"><!--Change password-->修改密码</h3>

	<form name="passwordForm" class="gf-form-group">
		<div class="gf-form">
				<span class="gf-form-label width-10"><!--New password-->新密码</span>
				<input type="password" required ng-minlength="4" ng-model="password" class="gf-form-input max-width-25">
		</div>

		<div class="gf-form-button-row">
			<button type="submit" class="btn btn-success" ng-click="setPassword()"><!--Update-->更新</button>
		</div>
	</form>

	<h3 class="page-heading"><!--Permissions-->权限</h3>

	<form name="passwordForm" class="gf-form-group">
		<div class="gf-form" >
			<gf-form-switch class="gf-form" label="ATOPS 管理员" checked="permissions.isGrafanaAdmin" switch-class="max-width-6"></gf-form-switch>
		</div>

		<div class="gf-form-button-row">
			<button type="submit" class="btn btn-success" ng-click="updatePermissions()"><!--Update-->更新</button>
		</div>
	</form>

	<h3 class="page-heading"><!--Organizations-->组织</h3>

	<form name="addOrgForm" class="gf-form-group">
		<div class="gf-form-inline">
			<div class="gf-form">
				<span class="gf-form-label"><!--Add-->添加</span>
				<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"	required class="gf-form-input max-width-20" placeholder="组织名称"><!--organization name-->
			</div>
			<div class="gf-form">
        	<span class="gf-form-label"><!--Role-->角色</span>
        	<span class="gf-form-select-wrapper">
            	<select type="text" ng-model="newOrg.role" class="gf-form-input width-10" ng-options="k as v for (k,v) in {'Viewer':'观众', 'Editor':'编辑', 'Admin':'管理员'}"></select>
        	</span>
			</div>
			<div class="gf-form">
				<button class="btn btn-success gf-form-btn" ng-click="addOrgUser()"><!--Add-->添加</button>
			</div>
		</div>
	</form>

	<table class="filter-table">
		<thead>
			<tr>
				<th><!--Name-->姓名</th>
				<th><!--Role-->角色</th>
				<th></th>
			</tr>
		</thead>
		<tr ng-repeat="org in orgs">
			<td>
				{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId"><!--Current-->当前</span>
			</td>
			<td>
        <div class="gf-form">
            <span class="gf-form-select-wrapper">
                <select type="text" ng-model="org.role" class="gf-form-input max-width-12" ng-options="k as v for (k,v) in {'Viewer':'观众', 'Editor':'编辑', 'Admin':'管理员'}" ng-change="updateOrgUser(org)">
                </select>
            </span>
        </div>
			</td>
			<td style="width: 1%">
				<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">
					<i class="fa fa-remove"></i>
				</a>
			</td>
		</tr>
	</table>

</div>
